<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="职业名称" prop="professionName">
        <el-input v-model="formData.professionName" placeholder="请输入职业名称" />
      </el-form-item>
      <el-form-item label="职业编码" prop="professionCode">
        <el-input v-model="formData.professionCode" placeholder="请输入职业编码" />
      </el-form-item>
      <el-form-item label="职业代码" prop="professionCode">
        <el-input v-model="formData.professionCode" placeholder="请输入职业代码，如：6-31-01-03" />
      </el-form-item>
      <el-form-item label="职业大类" prop="professionCategory">
        <el-input v-model="formData.professionCategory" placeholder="请输入职业大类" />
      </el-form-item>
      <el-form-item label="适用等级" prop="applicableLevels">
        <el-checkbox-group v-model="formData.applicableLevels">
          <el-checkbox value="五级">五级/初级工</el-checkbox>
          <el-checkbox value="四级">四级/中级工</el-checkbox>
          <el-checkbox value="三级">三级/高级工</el-checkbox>
          <el-checkbox value="二级">二级/技师</el-checkbox>
          <el-checkbox value="一级">一级/高级技师</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="审核状态" prop="approvalStatus">
        <el-select v-model="formData.approvalStatus" placeholder="请选择审核状态">
          <el-option label="待审核" :value="0" />
          <el-option label="已通过" :value="1" />
          <el-option label="未通过" :value="2" />
          <el-option label="审核中" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核意见" prop="approvalComments">
        <el-input
          v-model="formData.approvalComments"
          type="textarea"
          :rows="3"
          placeholder="请输入审核意见"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="submitForm" type="primary" :loading="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getProfession, createProfession, updateProfession } from '@/api/eval/profession'

const message = ElMessage

const emit = defineEmits(['success'])
const dialogVisible = ref(false)
const dialogTitle = computed(() => (formData.value.id ? '修改职业工种' : '添加职业工种'))
const formLoading = ref(false)
const formRef = ref()
const formData = ref({
  id: undefined,
  professionName: '',
  professionCode: '',
  professionCategory: '',
  applicableLevels: [] as string[],
  approvalStatus: 0,
  filingDate: '',
  approvalDate: '',
  approvalComments: '',
  documents: ''
})
const formRules = ref({
  professionName: [{ required: true, message: '职业名称不能为空', trigger: 'blur' }],
  professionCode: [{ required: true, message: '职业代码不能为空', trigger: 'blur' }],
  professionCategory: [{ required: true, message: '职业大类不能为空', trigger: 'blur' }],
  applicableLevels: [
    {
      type: 'array',
      required: true,
      message: '请至少选择一个适用等级',
      trigger: 'change',
      min: 1
    }
  ]
})

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  resetForm()
  if (id) {
    formLoading.value = true
    try {
      const data = await getProfession(id)
      // 处理适用等级字符串转数组
      if (data.applicableLevels && typeof data.applicableLevels === 'string') {
        data.applicableLevels = data.applicableLevels.split(',').filter((level: string) => level.trim())
      }
      Object.assign(formData.value, data)
    } finally {
      formLoading.value = false
    }
  }
}

/** 提交表单 */
const submitForm = async () => {
  const elForm = formRef.value
  if (!elForm) return
  const valid = await elForm.validate()
  if (!valid) return
  formLoading.value = true
  try {
    const data = { ...formData.value } as any
    // 处理适用等级数组转字符串
    if (data.applicableLevels && Array.isArray(data.applicableLevels)) {
      data.applicableLevels = data.applicableLevels.join(',')
    }

    if (data.id) {
      await updateProfession(data)
      message.success('修改成功')
    } else {
      await createProfession(data)
      message.success('新增成功')
    }
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    professionName: '',
    professionCode: '',
    professionCategory: '',
    applicableLevels: [],
    approvalStatus: 0,
    filingDate: '',
    approvalDate: '',
    approvalComments: '',
    documents: ''
  }
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

defineExpose({ open })

defineOptions({
  name: 'ProfessionForm'
})
</script>
